<style>
    .vl {
        vertical-align: middle !important;
    }
</style>

<!--页面主要内容-->
<main class="lyear-layout-content">
    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class=" callout-success callout" style="padding: 0;">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb" style="padding: 1.25rem 1rem;background-color: white;">
                            <li class="breadcrumb-item" aria-current="page">项目订单列表</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar d-flex flex-column flex-md-row">
                        <div class="toolbar-btn-action">
                            <a class="btn btn-primary m-r-5" data-toggle="modal" data-target="#addModal"><i
                                    class="mdi mdi-plus"></i> 新增</a>
                            <a class="btn btn-danger dels" href="javascript:;"><i class="mdi mdi-window-close"></i>
                                删除</a>
                        </div>

                        <form class="search-bar ml-md-auto form-inline" method="get"
                            action="{:url('admin/project_order/search')}" role="form">
                            <input type="hidden" name="search_field" id="search-field" value="name" />
                            <div class="input-group ml-md-auto">
                                <div class="input-group-prepend">
                                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false" id="search-btn">
                                        项目名称
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#!" data-field="name">项目名称</a>
                                    </div>
                                </div>
                                <input type="text" class="form-control" name="keyword" placeholder="请输入项目名称" />
                            </div>
                        </form>

                        <a type="click" class="btn btn-info mb-2" style="margin-left: 10px;"
                            href="{:url('admin/project_order/index')}">重置</a>

                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="check-all" />
                                                <label class="custom-control-label" for="check-all"></label>
                                            </div>
                                        </th>
                                        <th>编号</th>
                                        <th>预约用户</th>
                                        <th>地址</th>
                                        <th>预约项目</th>
                                        <th>服务评分</th>
                                        <th>服务价格</th>
                                        <th>服务状态</th>
                                        <th>预约时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach $project_order_list as $item}
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input ids" name="ids[]"
                                                    value="{$item.id}" id="ids-{$item.id}" />
                                                <label class="custom-control-label" for="ids-{$item.id}"></label>
                                            </div>
                                        </td>
                                        <td class="vl">{$item.id}</td>
                                        <td class="vl">{$item.user.nickname}</td>
                                        <td class="vl">{$item.region_text}</td>
                                        <td class="vl">{$item.project.name}</td>
                                        <td class="vl">{$item.rate}</td>
                                        <td class="vl">{$item.price}</td>
                                        <td class="vl" style="font-size: 18px">
                                            <span class="{$item.status_class}">{$item.status_text}</span>
                                        </td>
                                        <td class="vl">{$item.createtime_text}</td>
                                        <td class="vl">
                                            <div class="btn-group">
                                                <a type="button" class="role-add btn btn-xs btn-default open_edit"
                                                    title="" data-toggle="modal" data-target="#editModal"
                                                    data-id='{$item.id}'><i class="mdi mdi-pencil"></i></a>

                                                <!-- <a type="button" class="role-add btn btn-xs btn-default" title=""
                                                    data-toggle="modal" data-target="#myModal_{$item.id}"
                                                    data-id='{$item.id}'><i class="mdi mdi-pencil"></i></a> -->

                                                <a class="btn btn-xs btn-default del" data-original-title="删除"
                                                    href="javascript:;" data-toggle="tooltip" data-id="{$item.id}"><i
                                                        class="mdi mdi-window-close"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>

                        <div style="text-align: center">{$project_order_list->render()}</div>
                    </div>
                </div>
            </div>


            <div class="modal fade bd-example-modal-lg" id="editModal" tabindex="-1" role="dialog"
                aria-labelledby="myLargeModalLabel" style="display: none;" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h6 class="modal-title" id="myLargeModalTitle">修改项目订单</h6>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form class="edit_form" action="" method="" data-id="{$item.id}">
                                <div class="form-group">
                                    <label for="id">项目订单编号</label>
                                    <input type="text" class="form-control" id="id" readonly name="id">
                                </div>
                                <div class="form-group">
                                    <label for="nickname">预约用户</label>
                                    <input type="text" class="form-control" value="" readonly id="nickname">
                                </div>
                                <div class="form-group">
                                    <label for="nickname">预约项目</label>
                                    <div class="form-controls">
                                        <select name="projectid" class="form-control selectpicker"
                                            data-style="btn-primary" id="projectid">
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group ">
                                    <label for="type">预约地址</label>
                                    <div class="form-group">
                                        <select name="province" id="province" class="form-control col col-md-3"
                                            style="display: inline;">
                                        </select>

                                        <select name="city" id="city" class="form-control col col-md-3"
                                            style="display: inline;">
                                        </select>

                                        <select name="district" id="district" class="form-control col col-md-3"
                                            style="display: inline;">
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <textarea class="form-control" style="resize: none;" id="address" rows="3"
                                            placeholder="内容" name="address"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="status">项目状态</label>
                                    <div class="form-controls">
                                        <select name="status" class="form-control selectpicker" data-style="btn-primary"
                                            id="status">
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="content">备注</label>
                                    <textarea class="form-control" style="resize: none;" id="content" rows="3"
                                        name="content"></textarea>
                                </div>

                                <div class="form-group">
                                    <label for="price">服务报价</label>
                                    <input type="text" class="form-control" value="" name="price" id="price">
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                    <button type="submit" class="btn btn-primary model_edit">保存</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>


            <!-- TODO 模态框 -->
            <div class="modal fade bd-example-modal-lg" id="addModal" tabindex="-1" role="dialog"
                aria-labelledby="myLargeModalLabel" style="display: none;" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h6 class="modal-title" id="myLargeModalTitle">新增项目</h6>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form class="add_form" action="" method="">
                                <div class="form-group">
                                    <label for="add_name">项目名称</label>
                                    <input type="text" class="form-control" id="add_name" name="add_name">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                    <button type="submit" class="btn btn-primary">保存</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</main>
<!--End 页面主要内容-->

<script>
    $(".open_edit").click(function () {
        let id = $(this).data("id");

        console.log(id);

        // TODO 设表单id
        $("#id").val(id);

        $.ajax({
            type: "post",
            url: `{:url('admin/project_order/query')}`,
            data: {
                id
            },
            dataType: "json",
            success: function (res) {
                console.log(res.data);

                if (res.code === 1) {
                    $("#nickname").val(res.data.project_order.user.nickname);
                    $("#price").val(res.data.project_order.price);
                    $("#content").val(res.data.project_order.content);
                    $("#content").val(res.data.project_order.content);
                    $("#address").val(res.data.project_order.address.address);

                    // TODO 渲染预约项目
                    let project_option = res.data.project
                    let proTemp = ``;
                    project_option.forEach(item => {
                        if (item.id == res.data.project_order.projectid) {
                            proTemp +=
                                `<option value="${item.id}" selected>${item.name}</option>`;
                        } else {
                            proTemp +=
                                `<option value="${item.id}">${item.name}</option>`;
                        }
                    });
                    $("#projectid").html(proTemp);
                    //必须加，刷新select
                    $("#projectid").selectpicker('refresh');

                    // TODO 渲染项目状态
                    let status_option = res.data.status
                    let statusTemp = ``;
                    for (const key in status_option) {
                        if (key == res.data.project_order.status) {
                            statusTemp +=
                                `<option value="${key}" selected>${status_option[key]}</option>`;
                        } else {
                            statusTemp +=
                                `<option value="${key}">${status_option[key]}</option>`;
                        }
                    }
                    $("#status").html(statusTemp);
                    //必须加，刷新select
                    $("#status").selectpicker('refresh');

                    // TODO 省地址
                    let province_option = res.data.project_order.provinces_list
                    let provinceTemp = ``;
                    province_option.forEach(item => {
                        if (item.code == res.data.project_order.address.province) {
                            provinceTemp +=
                                `<option value="${item.code}" selected>${item.name}</option>`;
                        } else {
                            provinceTemp +=
                                `<option value="${item.code}">${item.name}</option>`;
                        }
                    });
                    $("#province").html(provinceTemp);
                    //必须加，刷新select
                    $("#province").selectpicker('refresh');

                    // TODO 市
                    let city_option = res.data.project_order.citys_list
                    let cityTemp = ``;
                    city_option.forEach(item => {
                        if (item.code == res.data.project_order.address.city) {
                            cityTemp +=
                                `<option value="${item.code}" selected>${item.name}</option>`;
                        } else {
                            cityTemp +=
                                `<option value="${item.code}">${item.name}</option>`;
                        }
                    });
                    $("#city").html(cityTemp);
                    //必须加，刷新select
                    $("#city").selectpicker('refresh');

                    // TODO 区
                    let district_option = res.data.project_order.districts_list
                    let districtTemp = ``;
                    district_option.forEach(item => {
                        if (item.code == res.data.project_order.address.district) {
                            districtTemp +=
                                `<option value="${item.code}" selected>${item.name}</option>`;
                        } else {
                            districtTemp +=
                                `<option value="${item.code}">${item.name}</option>`;
                        }
                    });
                    $("#district").html(districtTemp);
                    //必须加，刷新select
                    $("#district").selectpicker('refresh');


                } else {
                    console.log(res.msg);
                }
            }
        });
    })

    // TODO 选中省份，显示相应的城市
    $("#province").on('change', function (e) {
        e.preventDefault();
        let code = $(this).val();
        $.ajax({
            type: "post",
            url: `{:url('admin/project_order/area')}`,
            data: {
                code
            },
            dataType: "json",
            success: function (res) {

                if (res.code === 1) {
                    let option = '';

                    res.data.forEach(item => {
                        option += `<option value="${item.code}">${item.name}</option>`
                    });

                    console.log(res.data);
                    $("#city").html(option);
                    $("#city").selectpicker('refresh');

                    // TODO 在查询出省市后，在查询区
                    let code = res.data[0].code ? res.data[0].code : '';

                    getArea(code, "#district");

                }
            }
        });
    })

    // TODO 城市查询
    $("#district").on("change", function (e) {
        e.preventDefault();
        let code = $(this).val();

        getArea(code, "#district")
    })

    function getArea(code, elem) {
        $.ajax({
            type: "post",
            url: `{:url('admin/project_order/area')}`,
            data: {
                code
            },
            dataType: "json",
            success: function (res) {
                if (res.code === 1) {
                    let option = '';

                    res.data.forEach(item => {
                        option += `<option value="${item.code}">${item.name}</option>`
                    });

                    $(elem).html(option);
                    $(elem).selectpicker('refresh');

                }
            }
        });
    }

    // 获取的id
    function GetId() {
        // 存放id的数组
        let list = []

        $('input[name="ids[]"]:checked').each(function () {
            // console.log(item);
            list.push($(this).val())
        })

        return list
    }

    let idArr = [];

    // TODO ajax异步修改项目
    $(".edit_form").on('submit', function (e) {
        e.preventDefault()
        let formData = $(this).serialize();
        // let id = $(this).data('id');
        console.log(formData);
        return false

        $.ajax({
            type: "post",
            url: `{:url('admin/project_order/edit')}`,
            data: formData,
            dataType: "json",
            success: function (res) {
                if (res.code === 1) {

                    $.notify({
                        icon: 'mdi mdi-check',
                        message: res.msg,
                    }, {
                        type: "success",
                        delay: 1500,
                        z_index: 9999,
                        onClose: function () {
                            location.reload();
                        }
                    });
                } else {
                    $.notify({
                        icon: 'mdi mdi-window-close',
                        message: res.msg,
                    }, {
                        type: "danger",
                        z_index: 9999,
                        delay: 1500
                    });
                }
            }
        });
    })

    // TODO ajax新增项目
    $(".add_form").on('submit', function (e) {
        e.preventDefault()
        let formDate = $(this).serialize();
        // console.log(formDate);

        $.ajax({
            type: "post",
            url: `{:url('admin/project/add')}`,
            data: formDate,
            dataType: "json",
            success: function (res) {
                if (res.code === 1) {

                    $.notify({
                        icon: 'mdi mdi-check',
                        message: res.msg,
                    }, {
                        type: "success",
                        delay: 1500,
                        z_index: 9999,
                        onClose: function () {
                            location.reload();
                        }
                    });
                } else {
                    $.notify({
                        icon: 'mdi mdi-window-close',
                        message: res.msg,
                    }, {
                        type: "danger",
                        z_index: 9999,
                        delay: 1500
                    });
                }
            }
        });
    })

    $('.search-bar .dropdown-menu a').click(function () {
        var field = $(this).data('field') || '';
        $('#search-field').val(field);
        $('#search-btn').html($(this).text());
    });

    $(".del").on("click", function () {
        let pid = $(this).data("id");
        $.confirm({
            title: "提示",
            escapeKey: true,
            content: "是否删除此数据",
            backgroundDismiss: true,
            theme: 'modern',
            type: 'red',
            icon: 'mdi mdi-alert-outline mdi-36px',
            buttons: {
                okay: {
                    text: "确认",
                    keys: ["enter"],
                    btnClass: 'btn-info',
                    action: function () {
                        $.ajax({
                            type: "post",
                            url: `{:url('admin/project_order/delete')}`,
                            data: {
                                action: 'del',
                                pid,
                            },
                            dataType: "json",
                            success: function (res) {
                                if (res.code === 1) {
                                    $.notify({
                                        icon: 'mdi mdi-check',
                                        message: res.msg,
                                    }, {
                                        type: "success",
                                    });
                                    setTimeout(() => {
                                        location.reload();
                                    }, 1500);
                                } else {
                                    $.notify({
                                        icon: 'mdi mdi-window-close',
                                        message: res.msg,
                                    }, {
                                        type: "danger",
                                    });
                                }
                            },
                        });
                    },
                },
                cancel: {
                    text: "取消",
                    keys: ["ctrl", "shift"],
                    btnClass: 'btn-danger'
                },
            },
        });
    });

    $('.dels').on('click', function () {
        idArr = GetId();
        if (idArr.length === 0) {
            $.notify({
                icon: 'mdi mdi-alert',
                message: '请选择您想要操作的数据',
            }, {
                type: "info",
            });
            return false;
        }

        $.confirm({
            title: "提示",
            escapeKey: true,
            content: "是否删除选中数据",
            backgroundDismiss: true,
            theme: 'modern',
            type: 'red',
            icon: 'mdi mdi-alert-outline mdi-36px',
            buttons: {
                okay: {
                    text: "确认",
                    keys: ["enter"],
                    btnClass: 'btn-info',
                    action: function () {
                        $.ajax({
                            type: "post",
                            url: `{:url('admin/project_order/delete')}`,
                            data: {
                                action: 'dels',
                                idArr,
                            },
                            dataType: "json",
                            success: function (res) {
                                if (res.code === 1) {
                                    $.notify({
                                        icon: 'mdi mdi-check',
                                        message: res.msg,
                                    }, {
                                        type: "success",
                                    });
                                    setTimeout(() => {
                                        location.reload();
                                    }, 1500);
                                } else {
                                    $.notify({
                                        icon: 'mdi mdi-window-close',
                                        message: res.msg,
                                    }, {
                                        type: "danger",
                                    });
                                }
                            },
                        });
                    },
                },
                cancel: {
                    text: "取消",
                    keys: ["ctrl", "shift"],
                    btnClass: 'btn-danger',
                },
            },
        });
        // console.log(idArr);
    })
</script>